<template>
  <b-container style="background-color:rgb(246, 241, 232);" fluid>
    <b-container class="body" fluid>
      <transition
        appear
        enter-active-class="animated bounceInRight"
        leave-active-class="animated bounceOutLeft"
      >
        <b-row>
          <b-col></b-col>
          <b-col  class="mainCard mt-4" sm="3">
            <b-container fluid>
              <pre class="mt-4 mb-0" />
              <b-row style="text-align: center">
                <h1>注 册</h1>
              </b-row>
              <pre class="mt-4 mb-0" />
              <b-row style="margin-top: 1%; text-align: right">
                <b-col style="padding: 0">
                  <b-form-input
                    @blur="serachUserName"
                    v-model="username"
                    placeholder="登录名(长度大于4的纯英文)"
                    maxlength="10"
                  />
                </b-col>
                <b-col class="mt-2" sm="1">
                  <!-- 要替换到时候加个v-if else就行 -->
                  <b-spinner v-show="loadingVisible1" variant="success" small>
                  </b-spinner>
                  <b-icon
                    v-show="username != ''"
                    :icon="usernameRight ? 'x' : 'check'"
                    :style="usernameRight ? 'color:red' : 'color:green'"
                  />
                </b-col>
              </b-row>

              <b-row style="margin-top: 8%; text-align: left">
                <b-col style="padding: 0">
                  <b-form-input
                    v-model="password"
                    maxlength="16"
                    placeholder="密码"
                  />
                </b-col>
                <b-col sm="1"></b-col>
              </b-row>

              <b-row style="margin-top: 8%; text-align: left">
                <b-col style="padding: 0">
                  <b-form-input
                    v-model="passwordCertain"
                    placeholder="确认密码"
                  />
                </b-col>
                <b-col class="mt-2" sm="1">
                  <!-- <b-icon icon="check" style="color:green" /> -->
                  <b-icon
                    v-show="password != ''"
                    :icon="password == passwordCertain ? 'check' : 'x'"
                    :style="
                      password == passwordCertain
                        ? 'color: green'
                        : 'color: red'
                    "
                  />
                </b-col>
              </b-row>

              <pre class="mt-4 mb-0" />

              <!-- 分割线,下面是其他信息 -->
              <b-row style="margin-top: 1%; text-align: right">
                <b-col style="padding: 0">
                  <b-form-input
                    @blur="serachNickName"
                    v-model="nickname"
                    placeholder="昵称"
                    maxlength="10"
                  />
                </b-col>
                <b-col class="mt-2" sm="1">
                  <!-- 要替换到时候加个v-if else就行 -->
                  <b-spinner v-show="loadingVisible2" variant="success" small>
                  </b-spinner>
                  <b-icon
                    v-show="nickname != ''"
                    :icon="nicknameRight ? 'x' : 'check'"
                    :style="nicknameRight ? 'color:red' : 'color:green'"
                  />
                </b-col>
              </b-row>

              <b-row style="margin-top: 8%; text-align: left">
                <b-col style="padding: 0">
                  <b-form-input
                    @blur="email_blur"
                    v-model="email"
                    placeholder="邮箱"
                  />
                </b-col>
                <b-col class="mt-2" sm="1">
                  <b-icon
                    v-show="email != ''"
                    :icon="emailRight ? 'x' : 'check'"
                    :style="emailRight ? 'color:red' : 'color:green'"
                  />
                </b-col>
              </b-row>

              <b-row style="margin-top: 8%; text-align: left">
                <b-col style="padding: 0">
                  <b-form-input
                    @blur="getCode"
                    v-model="emailNum"
                    placeholder="邮箱验证码"
                    maxlength="6"
                  />
                </b-col>
                <!-- 验证码错误显示 -->
                <b-col class="mt-2" sm="4" v-show="!code">
                  <b-link
                    class="linkStyle"
                    @click="sendEmail"
                    v-if="sendEmailVisible"
                  >
                    发送
                  </b-link>
                  <span v-else style="color: darkgrey">
                    已发送({{ timer }})
                  </span>

                  <!-- <b-icon icon="check" style="color: green" /> -->
                  <!-- <p style="color:darkgray">已发送</p> -->
                </b-col>

                <!-- 验证码正确显示 -->
                <b-col class="mt-2" sm="4" v-show="code">
                  <b-icon icon="check" style="color: green" />
                </b-col>
              </b-row>

              <pre class="mt-4 mb-0" />

              <b-row style="margin-top: 0.3%; text-align: right">
                <b-col></b-col>
                <b-col sm="8">
                  <b-link class="linkStyle" @click="toLogin">
                    已有账户?马上登录!
                  </b-link>
                </b-col>
              </b-row>
              <b-row
                style="margin-top: 1%; text-align: right; margin-bottom: 7%"
              >
                <b-button @click="addUser" block variant="success"
                  >注册</b-button
                >
              </b-row>
            </b-container>
          </b-col>
          <b-col></b-col>
        </b-row>
      </transition>
    </b-container>
  </b-container>
</template>

<script>
import axios from "axios";
export default {
  name: "TheRegister",
  data() {
    return {
      username: "",
      password: "",
      passwordCertain: "",
      nickname: "",
      email: "",
      emailNum: "",
      sendText: "发送",
      usernameRight: true,
      nicknameRight: true,
      emailRight: true,
      loadingVisible1: false,
      loadingVisible2: false,
      //发送完右键30秒倒计时
      sendEmailVisible: true,
      code: false,
      //倒计时
      timer: 30,
    };
  },
  methods: {
    //跳转登录
    toLogin() {
      this.$router.push({
        path: "/login",
        params: {
          title: "登录",
        },
      });
    },
    //查询是否存在且是否正确
    serachUserName() {
      this.loadingVisible1 = true;
      axios
        .get("http://localhost:8081/user/serachUsername", {
          params: {
            username: this.username,
          },
        })
        .then((res) => {
          this.loadingVisible1 = false;
          this.usernameRight = res.data;
          if (this.username_blur()) {
            this.usernameRight = true;
          }
          //false 为服务器返回的,意为没有查询到
          // console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    serachNickName() {
      this.loadingVisible2 = true;
      axios
        .get("http://localhost:8081/user/serachNickname", {
          params: {
            nickname: this.nickname,
          },
        })
        .then((res) => {
          this.loadingVisible2 = false;
          this.nicknameRight = res.data;
          //false 为服务器返回的,意为没有查询到
          // console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //发送验证码邮件
    sendEmail() {
      axios
        .get("http://localhost:8081/email/sendEmail", {
          params: {
            emailReceiver: this.email,
          },
        })
        .then((res) => {
          console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
      this.timeWait();
      this.sendEmailVisible = false;
      localStorage.setItem("send", false);
    },
    //获取后端生成的随机码
    getCode() {
      axios
        .get("http://localhost:8081/email/getEmailCode")
        .then((res) => {
          if (res.data == this.emailNum) {
            this.code = true;
          } else {
            this.code = false;
          }
          console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //验证用户名格式
    username_blur() {
      var verify = /[a-zA-z]$/;
      if (!verify.test(this.username) || this.username.length < 4) {
        return true;
      } else {
        return false;
      }
    },

    //验证邮箱格式
    email_blur() {
      var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if (!verify.test(this.email)) {
        this.emailRight = true;
      } else {
        this.emailRight = false;
      }
    },

    //时间倒计时
    timeWait() {
      // console.log(this.timer);
      // console.log(this.sendEmailVisible);
      console.log("开始倒计时");
      var time = setInterval(() => {
        localStorage.setItem("time", this.timer);
        this.timer--;
        console.log(this.timer);
        if (this.timer <= 0) {
          this.sendEmailVisible = true;
          localStorage.removeItem("time");
          localStorage.removeItem("send");
          this.timer = 30;
          clearTimeout(time);
        }
      }, 1000);
    },
    //发送用户信息
    addUser() {
      console.log("我进来了");
      axios
        .get("http://localhost:8081/user/register", {
          params: {
            nickname: this.nickname,
            username: this.username,
            password: this.password,
            email: this.email,
          },
        })
        .then((res) => {
          this.showResult(res.data);
          var timm = 2;
          if (res.data) {
            var time = setInterval(() => {
              timm--;
              if (timm <= 0) {
                clearTimeout(time);
                this.toLogin();
              }
            }, 1000);
          }
          // console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //成功失败的提示框
    showResult(result) {
      const h = this.$createElement;
      const titleVNode = h("p", ["return"]);
      var messageVNode = null;
      if (result) {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "green" } }, ["注册成功,2秒后跳转登录"]),
        ]);
      } else {
        messageVNode = h("div", { class: ["foobar"] }, [
          h("p", { style: { color: "red" } }, ["注册失败"]),
        ]);
      }

      this.$bvModal.msgBoxOk([messageVNode], {
        title: [titleVNode],
        centered: true,
        hideBackdrop: true,
        noCloseOnBackdrop: true,
        okTitle: "好的",
      });
    },
  },
  created() {
    if (localStorage.getItem("time") != null) {
      this.timer = localStorage.getItem("time");
    }
    if (localStorage.getItem("send") == "false") {
      this.sendEmailVisible = false;
      this.timeWait();
    }
  },
};
</script>

<style scoped lang="css">
.mainCard {
  margin: 0.5%;
  border-radius: 10px;
  box-shadow: 0 2px 20px 0 rgba(92, 157, 211, 0.2);
  background-color: rgba(242, 242, 242, 0.906);
}
.body {
  background-image: url("https://imgapi.xl0408.top/");
  background-position: center;
  background-size: 100%;
  height: 700px;
  max-width: 1500px;
}
</style>